<template>
  <el-form
    :model="form"
    :rules="rules"
    label-width="auto"
    style="max-width: 600px"
    ref="formRef"
  >
    <h1 style="text-indent: 2em; margin-bottom: 20px">加入我们</h1>

    <el-form-item label="公司名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入公司名称" />
    </el-form-item>

    <el-form-item label="法人姓名" prop="legalName">
      <el-input v-model="form.legalName" placeholder="请输入法人姓名" />
    </el-form-item>

    <el-form-item label="身份证号" prop="idCardNo">
      <el-input v-model="form.idCardNo" placeholder="请输入身份证号" />
    </el-form-item>

    <el-form-item label="公司地址" prop="address">
      <el-input v-model="form.address" placeholder="请输入公司地址" />
    </el-form-item>

    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="form.mobile" placeholder="请输入手机号" />
    </el-form-item>

    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入电子邮箱" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        v-model="form.password"
        type="password"
        show-password
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>

    <!-- 上传组件 -->
    <el-row>
      <el-col :span="8">
        <el-form-item
          prop="licenseFile"
          :class="{ 'demo-httpRequestImg': licenseFileImg }"
        >
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="1"
            :on-change="licenseFileChange"
            :on-remove="licenseFileRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          prop="idCardFrontFile"
          :class="{ 'demo-httpRequestImg': idCardFrontFileImg }"
        >
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="idCardFrontFileChange"
            :on-remove="idCardFrontFileRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          prop="idCardBackFile"
          :class="{ 'demo-httpRequestImg': idCardBackFileImg }"
        >
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="idCardBackFileChange"
            :on-remove="idCardBackFileRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <h4>上传经营许可证</h4>
      </el-col>
      <el-col :span="8">
        <h4>上传经营许可证</h4>
      </el-col>
      <el-col :span="8">
        <h4>上传经营许可证</h4>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import axios from "axios"; // 确保已安装 axios

// 表单数据
const form = reactive({
  name: "",
  legalName: "",
  idCardNo: "",
  address: "",
  mobile: "",
  email: "",
  password: "",
  licenseFile: null,
  idCardFrontFile: null,
  idCardBackFile: null,
});

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  legalName: [{ required: true, message: "请输入法人姓名", trigger: "blur" }],
  idCardNo: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  address: [{ required: true, message: "请输入公司地址", trigger: "blur" }],
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    { type: "email", message: "邮箱格式不正确", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: "密码必须包含大小写字母、数字和特殊字符的 8-16 位组合",
      trigger: "blur",
    },
  ],
});

// 提交表单
const formRef = ref();
const onSubmit = async () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        // 创建 FormData 对象
        const formData = new FormData();
        formData.append("name", form.name);
        formData.append("legalName", form.legalName);
        formData.append("idCardNo", form.idCardNo);
        formData.append("address", form.address);
        formData.append("mobile", form.mobile);
        formData.append("email", form.email);
        formData.append("password", form.password);

        // 如果有上传的文件，加入 FormData
        if (form.licenseFile) formData.append("licenseFile", form.licenseFile);
        if (form.idCardFrontFile)
          formData.append("idCardFrontFile", form.idCardFrontFile);
        if (form.idCardBackFile)
          formData.append("idCardBackFile", form.idCardBackFile);

        // 发送 HTTP 请求
        const response = await axios.post(
          "/api/v1/company/createAccount",
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        );
        console.log("提交成功:", response.data);
      } catch (error) {
        console.error("提交失败:", error);
      }
    } else {
      console.log("表单验证失败");
    }
  });
};

// 上传文件的事件处理
const licenseFileImg = ref(false);
const licenseFileChange = (file: any) => {
  licenseFileImg.value = true;
  console.log(file);
};
const licenseFileRemove = () => {
  licenseFileImg.value = false;
};

const idCardFrontFileImg = ref(false);
const idCardFrontFileChange = (file: any) => {
  idCardFrontFileImg.value = true;
  console.log(file);
};
const idCardFrontFileRemove = () => {
  idCardFrontFileImg.value = false;
};

const idCardBackFileImg = ref(false);
const idCardBackFileChange = (file: any) => {
  idCardBackFileImg.value = true;
  console.log(file);
};
const idCardBackFileRemove = () => {
  idCardBackFileImg.value = false;
};
</script>

<style>
.el-row {
  margin-left: 100px;
}
.demo-httpRequestImg .el-upload {
  display: none;
}
</style>
